<template>
    <div>
        <el-select v-model="districtsValue" placeholder="请选择省份" :clearable="true" >
            <el-option
            v-for="item in districts"
            :key="item.value"
            :label="item.name"
            :value="item.name">
            </el-option>
        </el-select>
        <el-select v-model="cityValue" placeholder="请选择城市" :clearable="true">
                <el-option
                v-for="item in city"
                :key="item.value"
                :label="item.name"
                :value="item.name">
                </el-option>
        </el-select>
        <el-select v-model="countyValue" placeholder="请选择城区/县" @change="sendData" :clearable="true">
                <el-option
                v-for="item in county"
                :key="item.value"
                :label="item.name"
                :value="item.name">
                </el-option>
        </el-select>
    </div>
</template>

<script>
import axios from 'axios'
// import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      // 省份
      districts: [],
      districtsValue: '',
      //   市
      city: [],
      cityValue: '',
      // 区/县
      county: [],
      countyValue: ''
    }
  },
  created () {
    this.getDistricts()
  },
  methods: {
    async getDistricts () {
      const res = await axios.get('https://restapi.amap.com/v3/config/district', {
        params: {
          key: 'f9c12fa55c7ce512a1e748716e4702a1',
          keywords: '100000'
        }
      })
      this.districts = res.data.districts[0].districts
    //   console.log(res.data)
    },
    async getCity () {
      const res = await axios.get('https://restapi.amap.com/v3/config/district', {
        params: {
          key: 'f9c12fa55c7ce512a1e748716e4702a1',
          keywords: this.districtsValue
        }
      })
      this.city = res.data.districts[0].districts
    //   console.log(res.data)
    },
    async getCounty () {
      const res = await axios.get('https://restapi.amap.com/v3/config/district', {
        params: {
          key: 'f9c12fa55c7ce512a1e748716e4702a1',
          keywords: this.cityValue
        }
      })
      this.county = res.data.districts[0].districts
    },
    sendData () {
      this.$emit('sendData', {
        districts: this.districtsValue,
        city: this.cityValue,
        county: this.countyValue
      })
    }
    // set () {
    //   console.log(1231231)
    // }
  },
  computed: {
    // ...mapGetters('addressStore', ['getAddress'])
  },
  watch: {
    districtsValue (val) {
      this.getCity(val)
    },
    cityValue (val) {
      this.getCounty(val)
    }
  }
}

</script>
